<!DOCTYPE html>
	<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>User</title>
		<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
		<link rel="stylesheet" type="text/css" href="../themes/icon.css">
		<script type="text/javascript" src="../jquery.min.js"></script>
		<script type="text/javascript" src="../jquery.easyui.min.js"></script>
		<script type="text/javascript" src="../jquery.serializejson.js"></script>
	
		
	</head>
	<body>
	   <div class="easyui-layout" data-options="fit:true">
			<div data-options="region:'north'" style="height:150px">
					<a href="#" id="addBtn" class="easyui-linkbutton" data-options="iconCls:'icon-add'">添加新用户</a>
					<a href="#" id="removesBtn" class="easyui-linkbutton" data-options="iconCls:'icon-remove'">删除多个</a>
				<input class="easyui-searchbox" data-options="prompt:'Please Input Value',searcher:doSearch" style="width:350px">
	
			</div>
			<div data-options="region:'center',title:'用户信息',iconCls:'icon-ok'">
				<table id="dg"></table>
				
				<div id="dlg" class="easyui-dialog" title="Basic Dialog" data-options="iconCls:'icon-save',closed:true" style="width:400px;height:200px;padding:10px">
					<form id="ff" method="post">
						<div style="margin-bottom:20px">
					 
							<input class="easyui-textbox" name="_id">

						</div>
						<div style="margin-bottom:20px">用户名
							<input class="easyui-textbox" name="name" style="width:100%" data-options="required:true">
						</div>
						<div style="margin-bottom:20px">密码
							<input class="easyui-textbox" name="password" style="width:100%;height:30px" data-options="multiline:true">
						</div>
					</form>
					<div style="text-align:center;padding:5px 0">
						<a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()" style="width:80px">添加</a>
						<a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()" style="width:80px">清除</a>
					</div>
				</div>
			</div>
		</div>
		

			<script>
			var cateId = null;
			$('#dg').datagrid({
				url:'http://localhost:3000/users/list',
				method:'post',
				queryParams: {
					cateId: cateId,
				},
				fit:true,
				pagination:true,
				pageSize:10,
				pageList:[10,20,30],
				columns:[[
					{field:'ck',title:'复选',checkbox:true},
					{field:'name',title:'用户名',width:100},
					{field:'password',title:'密码',width:200},
					{field:'operate',title:'操作', width:80,
						formatter: function(value,row,index){
							return "<a onclick=deleteData('"+ row._id+"')>删除</a> <a onclick=editData('"+ row._id+"') class='upt'>修改</a>"
						}
					}
				]]
			});
			
				$("#addBtn").click(function(){
					$('#ff').form('clear');
					$('#dlg').dialog('open');
				})
				
			
			function clearForm(){
				$('#ff').form('clear');
			}
			
			
				function deleteData(id){
					
					$.messager.confirm('确认删除', '你确认删除数据吗？', function(r){
					if (r){
							$.ajax({
								type:"delete",
								url:"http://localhost:3000/users/data/" + id,
								async:true
							}).done(function(res){
								$("#dg").datagrid('reload');
							})
					}
				});
				}
				function editData(id){
					$.ajax({
						type:"put",
						url:"http://localhost:3000/users/data/" +id,
						async:true
					}).done(function(res){
						$('#ff').form('load', res);
						$('#dlg').dialog('open');
					})
				}
//				
				
				function submitForm(){
					var postData = $("#ff").serializeJSON();
	    			postData.cateId = cateId;
	    			if(postData._id.length>0){
	    				delete postData.cateId;
	    				// edit
	    				$.ajax({
		    				type:"put",
		    				url:"http://localhost:3000/users/data/"  + postData._id,
		    				data: postData,
		    				async:true
		    			}).done(function(res){
		    				console.log(res);
		    				// 这里要做一件事
		    				$.messager.show({
			                title:'信息提示',
			                msg:'数据修改成功',
			                timeout:3000,
			                showType:'show'
			            });
			            $('#dlg').dialog('close');
			            $('#dg').datagrid('reload');
		    			})
		    		}
    			else{
    				// add
    				delete postData._id;
    				$.ajax({
	    				type:"post",
	    				url:"http://localhost:3000/users/data",
	    				data: postData,
	    				async:true
	    			}).done(function(res){
	    				// 这里要做一件事
	    				$.messager.show({
		                title:'信息提示',
		                msg:'数据添加成功',
		                timeout:3000,
		                showType:'show'
		            });
		            $('#dlg').dialog('close');
		            $('#dg').datagrid('reload');
	    			})
    			}
        	}
				
				
				

				$("#removesBtn").click(function(){
					var rows = $("#dg").datagrid('getSelections');
					if(rows.length>0){
						var ids = [];
						rows.forEach(function(item,idx){
							ids.push(item._id)
						})
						console.log(ids);
						$.messager.confirm('确认删除', '你确认删除数据吗？', function(r){
							if (r){
								for(var i=0;i<ids.length;i++){
									$.ajax({
										type:"delete",
										url:"http://localhost:3000/users/data/" + ids[i],
										data:{
											ids: ids.toString()
										},
										async:true
									}).done(function(res){
										$("#dg").datagrid('reload');
									});
								}
							}
						});	
					}
				})

    			
			    		
	    		$("#loadAllDataBtn").click(function(){
	    			cateId = null;
	    			 $("#dg").datagrid({
					queryParams: {
						cateId: cateId
					}
				}).datagrid('reload');
	    		})
	    		
	    		function doSearch(value){
	            $("#dg").datagrid({
					queryParams: {
						cateId: cateId,
						title: value
					}
				}).datagrid('reload');
	        }
				
				function doSearch(value){
				$("#dg").datagrid({
					queryParams: {
						cateId: cateId,
						title: value
					}
				}).datagrid('reload');
			}
		</script>
	</body>
	</html>
